<!--用户列表页面-->
<template>
  <div class="common-containar draft">
    <div class="pageOther-container">
      <span class="first">系统管理 / 权限控制</span>
      <div class="content">
        <!-- 设置新增权限 -->
          <div ref="topHeight">
            <el-row>
              <el-form :inline="true" class="demo-form-inline addData searchForm">
                <el-row style="text-align: -webkit-right;">
                  <el-col>
                    <el-button v-if="$store.state.currentJur.isAdd"
                      icon="el-icon-plus"
                      class="addBtn"
                      type="btn-search"
                      @click="addRole"
                      size="small"
                      style="margin-bottom:0px !important"
                    >创建角色</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-row>
          </div>
        <!--查询条件 结束-->
          <el-table 
            :height="height"
            :data="tableData"
            style="width:100%" 
            tooltip-effect="dark"
            v-loading="loading"
          >
            <el-table-column label="序号" width="160" align="left">
              <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column prop="name" label="角色名称" width="260" align="left"></el-table-column>
            <el-table-column prop="status" label="有效标识" width="260" align="left">
              <template slot-scope="scope">
                <div class="UsingContrl" @click="changeState(scope.row)">
                  <span :class="[{ startUsing: scope.row.status=== 'True' || scope.row.status=== 'true' },{startNone: scope.row.status=== 'False' || scope.row.status=== 'false'}]">启用</span>
                  <span :class="[{ stopUsing: scope.row.status=== 'False' || scope.row.status=== 'false'},{startNone: scope.row.status=== 'True' || scope.row.status=== 'true'}]">禁用</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="left">
              <template slot-scope="scope">
                <el-button  v-if="$store.state.currentJur.isEdit"
                  @click.native.prevent="setJurHandle(scope.row)"
                  type="text"
                  size="small"
                >权限设置</el-button>
                <el-button v-if="roletyep == '审单OR管理员'"
                  @click.native.prevent="editJurHandle(scope.row)"
                  type="text"
                  size="small" style="color: #e6a23c;"
                >修改</el-button>
                <el-button v-if="roletyep == '审单OR管理员'"
                  @click.native.prevent="delJurHandle(scope.row)"
                  type="text"
                  size="small" style="color: #f56c6c;"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        <!--表格数据 结束-->
      </div>
      <!--分页-->
      <div class="pagination-container" align="right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="page.per"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    

    <el-dialog title="新增角色" :visible.sync="addRoleVisible" width="30%" :before-close="close">
			<el-form ref="addForm" :model="addform" label-width="100px" :rules="addRules" style="text-align:left;">
          <el-form-item label="角色名称" prop="Rolename" width="50%">
              <el-input v-model="addform.Rolename" placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="RoleRadio">
            <el-radio-group v-model="addform.RoleRadio">
              <el-radio label="True">启用</el-radio>
              <el-radio label="False">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="addRoleSubmit">确 定</el-button>
			</div>
    </el-dialog>
    <el-dialog title="修改角色" :visible.sync="editRoleVisible" width="30%">
			<el-form ref="editform" :model="editform" label-width="100px" :rules="editRules" style="text-align:left;">
          <el-form-item label="角色名称" prop="Rolename" width="50%">
              <el-input v-model="editform.Rolename" placeholder="请输入角色名称"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
				<el-button @click="editRoleVisible = false">取 消</el-button>
				<el-button type="primary" @click="editRoleSubmit">确 定</el-button>
			</div>
    </el-dialog>

    <el-dialog title="权限设置" :visible.sync="setJurVisible" width="50%">
        <el-row v-loading="treeLoading">
          <el-tree style="height: 500px;overflow: auto;"
            ref="tree"
            :data="treeData"
            show-checkbox
            node-key="id"
            :default-checked-keys="checkedKeys"
            :props="defaultProps">
        </el-tree>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setJurVisible = false">取 消</el-button>
          <el-button type="primary" @click="addJurSubmit" :loading="btnJurLoading">确 定</el-button>
        </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "perm",
  data() {
    return {
      roletyep: localStorage.getItem('roletyep'),
      height: 'calc(100% - 50px)',
      loading: false,btnJurLoading:false,
      tableData: [], //查询列表
      total: 0, //总条数默认为0
      currentPage: 1, //当前页数默认为1
      page: {
        //分页信息
        per: 10,
        page: 1
      },
     
      addRoleVisible: false,setJurVisible:false,
      editRoleVisible: false,
      updateUserId: "", //编辑id
      addform: {
        Rolename: "",
        RoleRadio: "True" //设置单选框默认启用状态
      },
      editform: {
        id: '',
        Rolename: "",
      },
      addRules: {
        Rolename: [
            { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
      },
      editRules: {
        Rolename: [
            { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
      },
      treeLoading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData: [],checkedKeys: []
    };
  },
  methods: {
    //初始化请求数据
    initData() {
      this.loading = true;
      var this_ = this;
      this_.$http.get( this_.GLOBAL.REQUESTURL + "/jvees/getJveesList?pageNum="+this_.page.page+"&pageSize="+this_.page.per)
        .then(function(res) {
          const result = res.data;
          this_.tableData = result.list; //给查询列表赋值
          this_.total = result.total;
          this_.loading = false;
        })
        .catch(function(err) {
          this_.tableData = [];
          this_.total = 0;
          this_.loading = false;
        });
    },
    /*每页条数变化     页数变化进行筛选条件重新请求渲染*/
    handleSizeChange(val) {
      this.page.per = val;
      this.page.page = 1;
      this.initData();
    },
    /*当前页码改变*/
    handleCurrentChange(val) {
      this.page.page = val;
      this.initData();
    },
   
    // 启用--禁用
    changeState(state) {
      var that = this;
      if (state.status == "True") {
        state.status = "False";
      } else {
        state.status = "True";
      }
      // 权限切换状态接口   开始
      this.$http.get(that.GLOBAL.REQUESTURL + "/jvees/updateStatus",{
        id: state.id,
        status: state.status
      })
      .then(function(res) {
        if(res.code == 200) {
          that.page.page = 1;
          that.currentPage = 1;
          that.$message.success(res.msg);
          that.initData();
        } else {
          that.$message.info(res.msg);
        };
      })
      .catch(function(err) {
        that.$message.success('修改失败！');
      });
      // 权限切换状态接口   结束
    },
    close() {
        this.addRoleVisible = false;
        this.$refs.addForm.resetFields();
    },
    addRole() {
      //增加角色点击事件，设置模态框展示
      var $this = this;
      $this.addRoleVisible = true;
      $this.addform.Rolename=''
      $this.addform.RoleRadio = "True";
    },
    //  Rolename:''
    addRoleSubmit() {   //  新增角色
      var $this = this;
      this.$refs.addForm.validate(valid => {
					if(valid){
            this.$http.post( $this.GLOBAL.REQUESTURL + "/jvees/insertJvees",{
              name: $this.addform.Rolename,
              status: $this.addform.RoleRadio
            }).then(function(res) {
              if(res.code == 200) {
                  $this.addRoleVisible=false;
                  $this.initData();
                  $this.$message.success( res.msg );
              } else {
                  $this.$message.info( res.msg );
              };
            })
            .catch(function(err) {
              $this.$message.success( "新增失败！");
            });
          } else {
              return false;
          }
      })
    },
    setJurHandle(row) {
      const _this = this
      this.setJurVisible = true;
      this.updateUserId = row.id;
      this.treeData = [];
      this.checkedKeys = [];
      this.treeLoading = true;
      _this.$http.get(_this.GLOBAL.REQUESTURL + "/jvees/getUserFunMsgList",{
        jveesId: row.id
      })
      .then(res => {
          _this.treeLoading = false;
          const Data = res.data;
          if(Data && Data.length > 0) {
            Data.forEach(item => {
              var obj1 = {
                id: item.id,
                name: item.menuName,
                children: []
              }
              if(item.res && item.res.length>0) {
                item.res.forEach(Ite => {
                  var obj2 = {
                    id: Ite.id,
                    name: Ite.menuName,
                    children: []
                  }
                  obj1.children.push(obj2);
                  if(Ite.res && Ite.res.length>0) {     //  有新增、编辑的界面
                    Ite.res.forEach(IT => {
                      var obj3 = {
                        id: IT.id,
                        name: IT.menuName
                      }
                      obj2.children.push(obj3);
                      if(IT.status) { _this.checkedKeys.push(IT.id) };
                    })
                  }
                })
              }
              _this.treeData.push(obj1)
            });
          }
          _this.$nextTick(() => {   //  必须加上$nextTick才生效******
            _this.$refs.tree.setCheckedKeys(_this.checkedKeys)
          })
      }).catch(err => {
          _this.treeData = []
      })
          

    },
    addJurSubmit() {  
      this.btnJurLoading = true;
      var ids = this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys());
      const self_ = this;
      self_.$http.post(self_.GLOBAL.REQUESTURL+'/jvees/updateJurisdiction',{
        id: self_.updateUserId,
        //ids: this.$refs.tree.getCheckedKeys()
        ids: ids
      })
      .then(res => {
        if(res.code == 200) {
            self_.currentPage = 1;
            self_.setJurVisible = false;
            self_.$message.success(res.msg);
            self_.initData(); 
            //location.reload();
        } else {
            self_.$message.info(res.msg);
        }
        self_.btnJurLoading = false;
      }).catch(err => {
        self_.$message.error('修改失败！');
        self_.setJurVisible = false;
      })
    },
    editJurHandle(row) {
      console.log(row)
      this.editform.id = row.id;
      this.editform.Rolename = row.name;
      this.editRoleVisible = true;
    },
    editRoleSubmit(){   //  修改角色提交
      var $this = this;
      console.log(this.editform)
      this.$refs.editform.validate(valid => {
					if(valid){
            this.$http.post( $this.GLOBAL.REQUESTURL + "/jvees/updateJvees",{
              id: $this.editform.id,
              name: $this.editform.Rolename,
            }).then(function(res) {
              if(res.code == 200) {
                  $this.editRoleVisible=false;
                  $this.initData();
                  $this.$message.success( res.msg );
              } else {
                  $this.$message.info( res.msg );
              };
            })
            .catch(function(err) {
              $this.$message.success( "新增失败！");
            });
          } else {
              return false;
          }
      })
    },
    delJurHandle(row) {
      console.log(row)
      const _this = this
        this.$confirm('此操作将永久删除角色名称为‘ '+row.name+' ’, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            _this.$http.get( _this.GLOBAL.REQUESTURL + "/jvees/deleteJvees",{
              id: row.id
            }).then(res => {
              if(res.code == 200) {
                  _this.initData();
                  _this.$message.success( res.msg );
              } else {
                  _this.$message.info( res.msg );
              };
            }).catch(err => {
              _this.$message.success( "删除失败！");
            })
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
        });
    },
  },
 
  mounted() {
    this.$nextTick(function() {
      if(localStorage.getItem("token")) {
        this.initData(); 
      };
    });
  }
};
</script>

<style scoped>
.registerMargin {
  margin-left: 30px;
}
.top_row {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.box-card .el-card__header {
  text-align: left;
  border-bottom: none;
}
.box-card .text label {
  display: block;
}
.box-card .text .font_bold {
  font-weight: bold;
  margin-top: 8px;
}
.el-form--inline .el-form-item {
  float: left;
}
.footer {
  width: 100%;
  text-align: center;
}
.el-form--inline .el-form-item {
  margin-bottom: 20px;
}
.PWcheckAll {
  text-align: left;
  display: inline-block;
  width: 100%;
}
.startUsing, .stopUsing {
  background: #3B7EE1;
  color: #fff;
  display: inline-block;
  width: 40px;
  border:1px solid #3B7EE1;
  /* border-radius: 3px; */
}
.stopUsing {
  /* background: #999999;
  color: #fff;
  display: inline-block;
  width: 40px; */

  /* border-radius: 3px; */
}
.UsingContrl{
  /* height: 30px; */
  /* margin-top: 5px; */
}
.startNone {
  display: inline-block;
  width: 40px;
  /* box-shadow: 0 0 5px 2px #f1f1f1; */
  /* border: 1px solid red; */
  margin: 0px -3px;
}
.UsingContrl span {
  width: 50px;
  height: 22px;
  line-height: 22px;
  display:inline-block;
  font-size:12px;
  cursor: pointer;
  text-align:center;
}
.UsingContrl span:hover {
  color:#2873E3;
  background: #FFFFFF;
  border-color: #8EBBFF;
}
.UsingContrl span:nth-child(1) {
  /* border-radius: 0.3rem 0 0 0.3rem; */
}
.UsingContrl span:nth-child(2) {
  /* border-radius: 0 0.3rem 0.3rem 0; */
}
.checkGroup {
  text-align: left !important;
}
.RoleInput {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 20px;
}
.RoleRadio {
  margin-bottom: 30px;
}
.startNone{
  background: #fff;
  color: #999999;
  display: inline-block;
  width: 40px;
  border:1px solid #fff;
  /* border-radius: 3px; */
}
.el-checkbox__input.is-checked+.el-checkbox__label {
  font-size:12px;
  color: #2D79E8;
}
.el-checkbox__label {
  color:#4d4d4d;
}
.Eightftsiz .el-checkbox__label{
  /* font-size: 18px !important; */
}
.Eightftsiz,.chckBoxWdth{
  width:100px;
  height:30px;
  line-height: 30px;
  margin-right: 20px;
  margin: 0px;
  background: #CFE2FF;
  text-align:left;
}
.draft /deep/ .el-checkbox__input {
  padding-left:10px;
}
.chckBoxWdth{
  background: #F6FAFF;
  margin:0;
}
.perm_BtnTop{
  margin-top: 10px;
}
</style>
